<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单的双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 表单中的哪些标签可以使用双向绑定
					双向数据绑定:用户可以录入的标签
					适用标签:1.input 2.单选框 3.多选框 4.下拉框 5.文本域
			 -->
			 <form action="http://www.baidu.com" target="_blank">
				 <div>
					 用户名: <input type="text"  v-model="username"/>
				 </div>
				 <div>
					 年龄:
					 <input type="number" v-model="age"/>
				 </div>
				 <div>
					 性别:
				 	<input type="radio" value="男" name="sex"  v-model="sex"/>男
				 	<input type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
					 爱好:
					 <input type="checkbox" name="hobby" v-model="hobby" value="唱"/>唱
					 <input type="checkbox" name="hobby" v-model="hobby" value="跳"/>跳
					 <input type="checkbox" name="hobby" v-model="hobby" value="rap"/>rap
					 <input type="checkbox" name="hobby" v-model="hobby" value="篮球"/>篮球
				 </div>
				 <div>
					 <select name="hello">
						 <option value="你好">你好</option>
						 <option value="您好">您好</option>
						 <option value="我好">我好</option>
						 <option value="他好">他好</option>
						 <option value="它好">它好</option>
					 </select>
				 </div>
				 <div>
					 <!-- vue的点击事件中有一个方法可以取消标签的默认行为 
							@click.privent
							常用场景:
								1.form标签  阻止action提交
								2.a标签  阻止href跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
		</div>
		 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		 <script>
			const app = new Vue({
				el : "#app",
				data : {
					username : '',
					sex : '',
					hobby : [],
					hello : '',
					age : ''
				},
				methods: {
					formBtn(){
						alert("提交数据")
					}
				}
			})
		 </script>
	</body>
</html>
